<template>
  <!--查询-->
  <el-form :inline="true" :model="queryAddressForm" class="demo-form-inline">
    <el-form-item label="计算机名称">
      <el-input v-model="queryAddressForm.name" placeholder="计算机名称" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="queryAddress">Query</el-button>
    </el-form-item>
  </el-form>

  <!--  表格-->
  <el-table :data="tableData.addressList" style="width: 100%">
    <el-table-column fixed prop="id" label="id" />
    <el-table-column prop="user.userId" label="用户id" />
    <el-table-column prop="name" label="收货人" />
    <el-table-column prop="user.userName" label="用户昵称" />
    <el-table-column prop="phone" label="电话" />
    <el-table-column prop="province" label="省"  />
    <el-table-column prop="city" label="市"  />
    <el-table-column prop="area" label="区/县"  />
    <el-table-column prop="town" label="镇"  />
    <el-table-column prop="village" label="村"  />
    <el-table-column prop="specific" label="详细地址"  />
    <el-table-column prop="createTime" label="创建时间"  />
    <el-table-column prop="updataTime" label="修改时间"  />
    <el-table-column fixed="right" label="设置" >
      <!--删除操作-->
      <!--scope它可以取任意字符串 获取wj的信息 table里的信息 wjid -->
      <template #default="scope">
        <el-button link type="primary" size="small" @click="todelAddress(scope.row)"
        >删除</el-button>
        <el-button link type="primary" size="small" @click="openDialog(scope.row)"
        >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="example-pagination-block">
    <div class="example-demonstration">When you have few pages</div>
    <el-pagination
        v-model:current-page="queryAddressForm.currentPage"
        v-model:page-size="queryAddressForm.pageSize"
        v-model:total="queryAddressForm.total"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 修改界面-->
  <el-dialog title="编辑地址信息" v-model="tableDataForm.dialogVisible" >
    <el-form :model="modifyAddress">
      <el-form-item label="昵称" >
        <el-input v-model="modifyAddress.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="modifyAddress.phone" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="省">
        <el-input v-model="modifyAddress.province" auto-complete="off" />
      </el-form-item>
      <el-form-item label="市">
        <el-input v-model="modifyAddress.city" auto-complete="off" />
      </el-form-item>
      <el-form-item label="区/县">
        <el-input v-model="modifyAddress.area" auto-complete="off" />
      </el-form-item>
      <el-form-item label="镇">
        <el-input v-model="modifyAddress.town" auto-complete="off" />
      </el-form-item>
      <el-form-item label="村">
        <el-input v-model="modifyAddress.village" auto-complete="off" />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="modifyAddress.specific" auto-complete="off" />
      </el-form-item>

<!--      <el-form-item label="修改时间">-->
<!--        <el-date-picker-->
<!--            v-model="modifyAddress.updataTime"-->
<!--            auto-complete="off"-->
<!--            type="date"-->
<!--            label="Pick a date"-->
<!--            placeholder="Pick a date"-->
<!--            style="width: 100%"/>-->
<!--      </el-form-item>-->


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="tableDataForm.dialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="toUpdate">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive,onMounted} from 'vue'
import {AddressForm,AddressImpl} from "@/type/AddressAction";
import {delAddress,updataAddress,queryaddress} from "@/request/AddressService";
import {GoodsForm} from "@/type/GoodsAction";
import {delGoods} from "@/request/GoodsService";
//查询条件 const:常量，只能定义一次
const queryAddressForm = reactive(new AddressImpl()).addressform
//查询结果
const tableData = reactive(new AddressImpl()).addressList
const  addressForm = reactive(new AddressImpl()).addressform
// 初始化 弹出 默认看不见
const  tableDataForm= reactive({
  dialogVisible:false
});
// 修改对象
const modifyAddress =reactive(new AddressImpl()).addressform

//分页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  //跳转的 页码
  queryAddressForm.pageNum=val
  console.log(queryAddressForm.pageNum)
  queryAddress();  // 原查询按钮调用的函数
}

const handleSizeChange = (val: number) => {
  console.log(`current page: ${val}`)
  //跳转的 页码
  queryAddressForm.pageSize=val
  console.log(queryAddressForm.pageSize)
  queryAddress();  // 原查询按钮调用的函数
}

//预加载，打开页面就查询显示数据
onMounted( async () =>{
  queryaddress(queryAddressForm).then(
      //返回信息  res = response
      (res)=>{
        console.log("res====",res.data)
        tableData.addressList=res.data.data;
        console.log(res.data.data);
      }
  )
})

//查询操作
const queryAddress = () => {
  //获取查询条件
  //调用接口
  queryaddress(queryAddressForm).then(
      (res)=>{
        console.log(res.data.message)
        console.log(res.data.data) //返回具体的数据
        //返回信息 更新页面
        tableData.addressList=res.data.data.list
        queryAddressForm.total=res.data.data.total
      }
  )
  console.log('提交成功!')
}

//删除操作
const todelAddress = async (delAddressForm: AddressForm) => {
  //获取删除id
  //调用接口
  console.log(delAddressForm);
  await delAddress(delAddressForm.id);
  // 等待删除成功之后,重新请求数据
  // queryGoods();

  delAddress(delAddressForm.id).then(
      (res) => {
        //返回信息，页面更新
        // tableData.goodsList = res.data.data
        // 删除成功后,重新请求
        console.log('删除成功')
        queryAddress();
      }
  )

}
const openDialog=(scoprow:AddressForm)=>{
  //选中的数据 放到弹出框中
  modifyAddress.id=scoprow.id
  modifyAddress.name=scoprow.name
  modifyAddress.phone=scoprow.phone
  modifyAddress.province=scoprow.province
  modifyAddress.city=scoprow.city
  modifyAddress.area=scoprow.area
  modifyAddress.town=scoprow.town
  modifyAddress.village=scoprow.village
  modifyAddress.specific=scoprow.specific
  modifyAddress.updataTime=scoprow.updataTime
  //设置弹出窗口可见
  tableDataForm.dialogVisible=true;
}
//修改
const toUpdate = () => {
  //获取修改id
  //调用接口
  updataAddress(modifyAddress).then(
      (res)=>{
        //返回信息，页面更新
        queryAddress()
        tableDataForm.dialogVisible=false

      }
  )
  console.log('修改成功')
}


</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>